<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
	if("${sessionScope.cvo.id }"==""){
		$("#outBtn").click();
	}
	startChat();
	setInterval("getMessageList()", 1500);
	$('#chatContent').keyup(function(e) {
		if(e.keyCode == 13) {
			$("#chatBtn").click();
		}
	});
	
	$("#chatBtn").click(function(){

		$.ajax({
			 type:"post",
			 url:"sendMessage.do",
			 data:$("#chatForm").serialize(),
			 dataType:"json",
			 success:function(jsonData){
				getMessageList();
				$("#chatContent").val("");
				$("#chatContent").focus();
			 }
		 });
	});
	
});
function getMessageList(){
	$.ajax({
		 type:"post",
		 url:"getMessageList.do",
		 data:$("#chatForm").serialize(),
		 dataType:"json",
		 success:function(jsonData){			
			$.each(jsonData,function(index,val){
				if(val.log=="true"){
					$("#browser").append("<tr><td><div align='center' style='background: teal; color:white; padding:10px; border:1px solid yellow;border-radius:20px;'><strong>"+val.content+"</strong></div></td></tr>");
				}
				else{
				if(val.userId=="${sessionScope.cvo.id }"){		
					$("#browser").append("<tr><td align='right'><span style='background: #FFFFB3;padding:10px; border:1px solid yellow;border-radius:20px; float: right; max-width: 250px; word-wrap: break-word; '><strong>"+val.content+"</strong></span></td></tr>");
				}else{
					$("#browser").append("<tr><td><strong style='font-size: 12pt'>"+val.userId+"</strong></td></tr>");
					$("#browser").append("<tr><td align='left'><span style='background: white;padding:10px; border:1px solid yellow;border-radius:20px; max-width:250px; float:left; word-wrap: break-word; '><strong>"+val.content+"</strong></span></td></tr>");
				}
				}
				 lastNo=val.messageNo;				 					 
			 });
			 $("#lastNo").val(lastNo);
				$('#chatPanel').scrollTop($('#chatPanel')[0].scrollHeight);
				
		 }
	 });
}
function startChat(){
	$.ajax({
		 type:"post",
		 url:"enterChat.do",
		 data:$("#chatForm").serialize(),
		 dataType:"json",
		 success:function(jsonData){		
				$.each(jsonData,function(index,val){
					$("#browser").append("<tr><td width='500px'><div align='center' style='background: teal; color:white; padding:10px; border:1px solid yellow;border-radius:20px; width:460px;'><strong>"+val.content+"</strong></div></td></tr><br>");
					 lastNo=val.messageNo;					 					 
				 });
				 $("#lastNo").val(lastNo);
		 }
	 });
}
function endChat(){
	$.ajax({
		 type:"post",
		 url:"endChat.do",
		 data:$("#chatForm").serialize(),
		 dataType:"json",
		 success:function(jsonData){		
			
		 }
	 });
}

$(window).on("beforeunload", function(){
	endChat();
});
</script>

</head>
<body>
<form id="chatForm">
<input type="hidden" name="messageNo" id="lastNo" value="0">
<input type="hidden" name="userId" value="${sessionScope.cvo.id }">
<div id="chatPanel" style="background:url('${initParam.root}/img/chatBackground.jpg'); height:530px; width:500px; overflow:auto; overflow-x:hidden;" ><table id="browser" cellpadding="5" style="font-size: 9pt"></table></div>	

<textarea rows="2" cols="40" name="content" maxlength="50" id="chatContent"></textarea>
<input type="button" value="보내기" id="chatBtn">  <input type=button value=채팅방나가기 onclick='javascript:self.close()' id="outBtn">
</form>




</body>
</html>